<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动态列表</title>
    <script src="H:\jQuery\js\jquery-3.7.1.min.js"></script>
</head>
<body>
    <!-- 输入框和添加按钮 -->
    <input type="text" id="inputText" placeholder="输入内容">
    <button id="addBtn">添加</button>
    <!-- 列表容器 -->
    <ul id="listContainer"></ul>

    <script>
        $(function() {
            // 1. 点击“添加”按钮，新增列表项
            $("#addBtn").click(function() {
                // 获取输入框内容（去空格）
                let text = $("#inputText").val().trim();
                if (text === "") {
                    alert("请输入内容！");
                    return;
                }

                // 创建列表项（包含文本和删除按钮）
                let listItem = $(`
                    <li>
                        ${text}
                        <button class="deleteBtn">删除</button>
                    </li>
                `);

                // 2. 给“删除”按钮绑定点击事件
                listItem.find(".deleteBtn").click(function() {
                    // 删除当前列表项
                    $(this).parent().remove();
                });

                // 3. 点击列表项本身，文字变红色
                listItem.click(function(e) {
                    // 避免点击“删除按钮”时触发（阻止事件冒泡）
                    if (e.target.className !== "deleteBtn") {
                        $(this).css("color", "red");
                    }
                });

                // 添加到列表容器
                $("#listContainer").append(listItem);
                // 清空输入框
                $("#inputText").val("");
            });
        });
    </script>
</body>
</html>